<template>
  <div :id="config.option.id" class="chart-box" style="height:135px;"></div>
</template>
<script>
  import echarts from 'echarts';

  export default {
    name: 'cyclicHalfChart',
    props: {
      config: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        chart: '',
        val: ''
      }
    },
    mounted() {
      this.val = this.config.option.value;
      this.chart = echarts.init(document.getElementById(this.config.option.id));

    },
    methods: {
      initChart() {
        let option = {
          title: {
            show: true,
            text: this.val+'%',
            x: 'center',
            y: 'center',
            top: '50%',
            backgroundColor:'#4DD0A9',
            textStyle: {
              fontSize: 26,
              color: this.config.option.txtColor || '#fff',
              fontWeight: 'normal'
            },
            subtext: '年度预算完成量',
            subtextStyle: {
              color: 'rgba(107,238,255,1)',
              fontSize: 18
            }
          },
          series: [{
            name: '',
            type: 'pie',
            startAngle: 0,
            hoverAnimation: false,
            radius: ["120%", "170%"],
            center: ['50%', '100%'],
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#20D8BC'
                }, {
                  offset: 1,
                  color: '#029ED8'
                }]
              }
            },
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{value: 100,},
              {value: this.val,},
              {
                value: 100-this.val,
                itemStyle: {
                  normal: {
                    color: "#041223"
                  }
                }
              },

            ]
          }]
        };
        this.chart.setOption(option);
         this.chart.resize();
      }
    }
  }

</script>

<style lang="scss" scoped>

</style>
